<template>
  <div>
    <div class="Ystreet">
      <img
        src="../assets/img/箭头.png"
        alt=""
        width="20px"
        height="20px"
        @click="goBack"
      />
      <h3>轻盈投</h3>
    </div>
    <div class="picture">
      <img src="../assets/img/轻盈图.jpg" alt="" v-show="isShowPhoto" />
      <img src="../assets/img/轻盈图2.jpg" alt="" v-show="isShowPhoto1" />
      <img src="../assets/img/轻盈图3.jpg" alt="" v-show="isShowPhoto2" />
      <img src="../assets/img/轻盈图4.jpg" alt="" v-show="isShowPhoto3" />
      <img src="../assets/img/轻盈图5.jpg" alt="" v-show="isShowPhoto4" />
    </div>
    <div class="deterministic">
      <ul>
        <li>
          <img src="../assets/img/个人_2.png" alt="" @click="primary" />
          初级定投
        </li>
        <li>
          <img
            src="../assets/img/y（基金走势图）.png"
            alt=""
            @click="advanced"
          />
          进阶定投
        </li>
        <li>
          <img src="../assets/img/添加用户.png" alt="" @click="expert" />
          达人定投
        </li>
        <li>
          <img src="../assets/img/定位管理.png" alt="" @click="county" />
          县域定投
        </li>
        <li>
          <img src="../assets/img/养老服务_fill.png" alt="" @click="annuity" />
          养老定投
        </li>
      </ul>
    </div>
    <div class="week">
      <p class="four">每周四</p>
      <p class="depositY">存入<span>10</span> 元</p>
      <div class="weekBox">
        <van-swipe>
          <van-swipe-item>
            <div class="weekBoxx">
              <div class="one1Y">{{ oneY1 }}</div>
              <div class="twoY">{{ twoY1 }}</div>
              <div class="threeY">{{ threeY1 }}</div>
              <div class="Ytour">近三年月定投</div>
              <router-link to="BulkDensity">
                <div class="openY">去看看</div>
              </router-link>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="weekBoxx">
              <div class="one1Y">{{ oneY2 }}</div>
              <div class="twoY">{{ twoY2 }}</div>
              <div class="threeY">{{ threeY2 }}</div>
              <div class="Ytour">近三年月定投</div>
              <router-link to="BulkDensity">
                <div class="openY">去看看</div>
              </router-link>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="weekBoxx">
              <div class="one1Y">{{ oneY3 }}</div>
              <div class="twoY">{{ twoY3 }}</div>
              <div class="threeY">{{ threeY3 }}</div>
              <div class="Ytour">近三年月定投</div>
              <router-link to="BulkDensity">
                <div class="openY">去看看</div>
              </router-link>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>

<script>
// import { Toast } from 'vant';
import { cast } from "../api/PayofFcast";
export default {
  data() {
    return {
      oneY1: "严控回撤 持有体验佳",
      twoY1: "",
      threeY1: "",
      oneY2: "主要投资高等级债卷",
      twoY2: "",
      threeY2: "",
      oneY3: "闲钱投TA 省心给你",
      twoY3: "",
      threeY3: "",
      isShowPhoto: true,
      isShowPhoto1: false,
      isShowPhoto2: false,
      isShowPhoto3: false,
      isShowPhoto4: false,
    };
  },
  methods: {
    primary() {
      (this.isShowPhoto = true), (this.isShowPhoto1 = false);
      this.isShowPhoto2 = false;
      this.isShowPhoto3 = false;
      this.isShowPhoto4 = false;
      cast({ fundType: 0 }).then((res) => {
        if (res.code == 200) {
          this.twoY1 = res.data[0].fundName;
          this.threeY1 = res.data[0].yearRate;
          this.twoY2 = res.data[1].fundName;
          this.threeY2 = res.data[1].yearRate;
          this.twoY3 = res.data[0].fundName;
          this.threeY3 = res.data[0].yearRate;
        } else {
          Dialog({ title: "温馨提示", message: res.mag });
        }
      });
    },
    advanced() {
      this.isShowPhoto = false;
      this.isShowPhoto1 = true;
      this.isShowPhoto2 = false;
      this.isShowPhoto3 = false;
      this.isShowPhoto4 = false;
      cast({ fundType: 1 }).then((res) => {
        if (res.code == 200) {
          this.twoY1 = res.data[0].fundName;
          this.threeY1 = res.data[0].yearRate;
          this.twoY2 = res.data[1].fundName;
          this.threeY2 = res.data[1].yearRate;
          this.twoY3 = res.data[2].fundName;
          this.threeY3 = res.data[2].yearRate;
        } else {
          Dialog({ title: "温馨提示", message: res.mag });
        }
      });
    },
    expert() {
      this.isShowPhoto2 = true;
      this.isShowPhoto = false;
      this.isShowPhoto1 = false;
      this.isShowPhoto3 = false;
      this.isShowPhoto4 = false;
      cast({ fundType: 2 }).then((res) => {
        if (res.code == 200) {
          this.twoY1 = res.data[0].fundName;
          this.threeY1 = res.data[0].yearRate;
          this.twoY2 = res.data[1].fundName;
          this.threeY2 = res.data[1].yearRate;
          this.twoY3 = res.data[2].fundName;
          this.threeY3 = res.data[2].yearRate;
        } else {
          Dialog({ title: "温馨提示", message: res.mag });
        }
      });
    },
    county() {
      this.isShowPhoto3 = true;
      this.isShowPhoto = false;
      this.isShowPhoto1 = false;
      this.isShowPhoto2 = false;
      this.isShowPhoto4 = false;
      cast({ fundType: 3 }).then((res) => {
        if (res.code == 200) {
          this.twoY1 = res.data[0].fundName;
          this.threeY1 = res.data[0].yearRate;
          this.twoY2 = res.data[1].fundName;
          this.threeY2 = res.data[1].yearRate;
          this.twoY3 = res.data[2].fundName;
          this.threeY3 = res.data[2].yearRate;
        } else {
          Dialog({ title: "温馨提示", message: res.mag });
        }
      });
    },
    annuity() {
      this.isShowPhoto4 = true;
      this.isShowPhoto = false;
      this.isShowPhoto1 = false;
      this.isShowPhoto2 = false;
      this.isShowPhoto3 = false;
      cast({ fundType: 4 }).then((res) => {
        if (res.code == 200) {
          this.twoY1 = res.data[0].fundName;
          this.threeY1 = res.data[0].yearRate;
          this.twoY2 = res.data[1].fundName;
          this.threeY2 = res.data[1].yearRate;
          this.twoY3 = res.data[2].fundName;
          this.threeY3 = res.data[2].yearRate;
        } else {
          Dialog({ title: "温馨提示", message: res.mag });
        }
      });
    },
    // 返回上一页
    goBack() {
      this.$router.push({
        name: "Fund",
      });
    },
  },
  created() {
    this.primary();
  },
};
</script>

<style scoped lang="stylus">
.Ystreet {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  padding: 10px 8px;
  background-color: white;
}

.Ystreet h3 {
  margin-right: 170px;
  line-height: 30px;
}

.picture {
  width: 100%;
  height: 200px;
}

.picture img {
  object-fit: cover;
  width:100%;
  height :100%
}

.deterministic {
  margin-top: 30px;
}

.deterministic ul {
  display: flex;
  justify-content: space-around;
}

.deterministic ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #634f42;
  /* font-size: 18px; */
  font-weight: 600;
}

.deterministic ul li img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
  border-radius: 50px;
  box-shadow: 0px 0px 10px rgba(255, 166, 0, 0.308);
}

.week {
  width: 90%;
  height: 320px;
  background-color: white;
  border-radius: 10px;
  margin: 25px 20px 20px;
  box-shadow: 0px 0px 15px rgba(255, 166, 0, 0.121);
  text-align: center;
  padding: 30px 0px 20px;
}

.four {
  font-size: 18px;
  margin-bottom: 5px;
}

.depositY {
  font-size: 24px;
  font-weight: 600;
  color: #5e2612c1;
}

.depositY span {
  font-size: 30px;
  color: #F4A460;
}

.weekBox {
  width: 90%;
  height: 220px;
  background-color: #FDF5E6;
  margin-left: 17px;
  margin-top: 10px;
  border-radius: 10px;
}

/deep/ .van-swipe {
  height: 250px;
}

.one1Y {
  font-size: 20px;
  margin-top: 25px;
  font-weight: 600;
}

.twoY {
  margin-top: 10px;
}

.threeY {
  color: #F4A460;
  margin-top: 10px;
  font-size: 30px;
  font-weight: bold;
}

.Ytour {
  margin-top: 5px;
}

.openY {
  height: 35px;
  width: 160px;
  background-color: #FF6347;
  border-radius: 50px;
  line-height: 35px;
  color: white;
  font-size: 17px;
  margin-top: 10px;
  margin-left: 78px;
}
</style>
